// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { logistics } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList, RefreshScrollView, Results, Layout } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class Logistics extends Component {


  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      logisticsData: [],
    }
  }

  componentDidMount() {

    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.showLoadingData()
    });
  }

  showLoadingData(options) {
    this.loading = Toast.loading('加载中', 0)
    this.loadingData(options).then(res => {
      this.setState({
        logisticsData: res[0].data
      })
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  loadingData(options) {
    const { logisticsOrderNo } = this.props
    return Promise.all([logistics({ logisticsOrderNo })])
  }

  onRefresh = () => {
    this.setState({
      refreshing: true
    })
    this.loadingData().then(res => {
      console.log(res)
      this.setState({
        logisticsData: res[0].data
      })
    }).finally(() => {
      this.setState({
        refreshing: false
      })
    })
  }

  onEndReached = () => {
    // onEndReached.call(this)
  }

  render() {
    const { refreshing, logisticsData } = this.state
    console.log(logisticsData)
    return (
      <Layout
        style={{ backgroundColor: '#fff' }}
        header={<Status />}
      // footer={}
      >
        <NavBar
          title="查看物流"
          back={true}
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
        >
          <View style={{ paddingTop: 4, paddingBottom: 16, }}>
            <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
              <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
              <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', }}>
                <Text style={{ fontSize: 14, color: '#000', lineHeight: 20, }}>最新消息</Text>
              </View>
            </View>
            <View style={{ paddingHorizontal: 12, }}>
              {logisticsData.map((item, index) => {
                console.log(item)
                return (
                  <View style={{ flexDirection: 'row', alignItems:'flex-start', }} key={index}>
                    <View style={{ width: 90 }}>
                      <Text style={{ fontSize: 14, color: '#8B8B8D', lineHeight: 16, marginBottom: 4 }}>{item.acceptTime}</Text>
                    </View>
                    <View style={{ alignItems: 'center', marginHorizontal: 6 }}>
                      <View style={{ width: 13, height: 13, borderRadius: 6.5, backgroundColor: 'rgba(116, 132, 255, 0.3)', alignItems: 'center', justifyContent: 'center', }}>
                        <View style={{ width: 7, height: 7, borderRadius: 3.5, backgroundColor: '#7484FF' }} />
                      </View>
                      <View style={{ flex: 1, width: .5, backgroundColor: '#252C4F' }}></View>
                    </View>
                    <View style={{ flex: 1, paddingBottom: 24 }}>
                      <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>{item.acceptStation}</Text>
                      <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>{item.Remark}</Text>
                    </View>
                  </View>
                )
              })}
              {logisticsData.length <= 0 && <Results type='data' width={size(500)} height={size(200)} />}
            </View>
          </View>
        </RefreshScrollView>
      </Layout>
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(Logistics))
